<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>演示程序</title>
	<style>
		html,
		body,
		#container,
		div,
		#list,
		ul,
		li {
			padding: 0;
			margin: 0;
		}

		#container {
			width: 1300px;
			overflow: hidden;
		}

		#list {
			display: flex;
		}

		#list li {
			list-style: none;
			border: 6px solid #FFF;
		}

		#list li>img {
			width: 100%;
			border-radius: 10px;
		}

		#things{
			display: none;
		}
		table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
td,th {
    padding: 0;
}
 
.pure-table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
}
 
.pure-table caption {
    color: #000;
    font: italic 85%/1 arial,sans-serif;
    padding: 1em 0;
    text-align: center;
}
 
.pure-table td,.pure-table th {
    border-left: 1px solid #cbcbcb;
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    padding: .5em 1em;
}
 
.pure-table thead {
    background-color: #e0e0e0;
    color: #000;
    text-align: left;
    vertical-align: bottom;
}
 
.pure-table td {
    background-color: transparent;
}
	</style>
</head>

<body>
	<div id="container">
		<h1>206班计算机视觉演示--<button onclick="traggleThings()">详单</button></h1>
		<div id="things">
			<table class="pure-table">
				<thead>
					<tr>
						<th>物品</th>
						<th>描述</th>
						<th>数量</th>
					</tr>
				</thead>
				<tbody id="things_body" >

				</tbody>
			</table>
		</div>
		<ul id="list">

		</ul>

		
	</div>
	<script type="text/javascript">
		const thingsBody = document.getElementById('things_body')
		const ts = document.getElementById('things') // table

		const ezMap = {"person":"人","bicycle":"自行车","car":"车","motorcycle":"摩托车","airplane":"飞机","bus":"公共汽车","train":"火车","truck":"卡车","boat":"船","traffic light":"红绿灯","fire hydrant":"消防栓","stop sign":"停车标志","parking meter":"停车费","bench":"板凳","bird":"鸟","cat":"猫","dog":"狗","horse":"马","sheep":"羊","cow":"牛","elephant":"大象","bear":"熊","zebra":"斑马","giraffe":"长颈鹿","backpack":"背包","umbrella":"伞","handbag":"手提包","tie":"领带","suitcase":"手提箱","frisbee":"飞盘","skis":"滑雪板","snowboard":"滑雪板","sports ball":"体育球","kite":"风筝","baseball bat":"棒球棒","baseball glove":"棒球手套","skateboard":"滑板","surfboard":"冲浪板","tennis racket":"网球拍","bottle":"瓶","wine glass":"酒杯","cup":"杯","fork":"叉","knife":"刀","spoon":"勺子","bowl":"碗","banana":"香蕉","apple":"苹果","sandwich":"三明治","orange":"橙色","broccoli":"西兰花","carrot":"胡萝卜","hot dog":"热狗","pizza":"披萨","donut":"甜甜圈","cake":"蛋糕","chair":"椅子","couch":"沙发上","potted plant":"盆栽植物","bed":"床上","dining table":"餐桌","toilet":"厕所。。。","tv":"电视","laptop":"移动PC","mouse":"鼠标","remote":"远程","keyboard":"键盘","cell phone":"手机","microwave":"微波","oven":"烤箱","toaster":"烤面包机","sink":"水槽","refrigerator":"冰箱","book":"书","clock":"时钟","vase":"花瓶","scissors":"剪刀","teddy bear":"泰迪熊","hair drier":"头发干燥器","toothbrush":"牙刷"}

		function traggleThings(){
			const dis = getComputedStyle(ts)["display"]
			ts.style.display = dis=='block'?'none':'block';
		}
		class HeartCheck {
			constructor(timeout, ws) {
				this.timeout = timeout;
				this.flag = undefined;
				this.ws = ws;
			}
			reset() {
				clearTimeout(this.flag)
				this.start()
			}
			start() {
				this.flag = setTimeout(function () {
					this.ws.send("ping")
				}.bind(this), this.timeout)
			}
		}
		function calculate(inf) {
			var map = {}
			inf.someThing.forEach(el => {
				const [k, _] = el.split(" ");
				console.log(k)
				if (map[k]) {
					map[k] += 1
				} else {
					map[k] = 1
				}
			})
			return map
		}
		function fillThings(inf){
			const map = calculate(inf);
			thingsBody.innerHTML = Object.keys(map).map(k=>`<tr><td>${k}</td><td>${ezMap[k]||''}</td><td>${map[k]}</td></tr>`).join("\n")
		}
		function buildLi(src) {
			const img = new Image()
			img.src = src;
			const li = document.createElement('li')
			li.appendChild(img);
			return li;
		}

		function loadImage(src) {
			const lst = document.getElementById('list');
			lst.innerHTML = "";
			lst.appendChild(buildLi('/static/' + src))
			lst.appendChild(buildLi('/static/yolo5/' + src))
		}
		var ws = new WebSocket("ws://113.125.105.56:8000/chat");
		const heartCheck = new HeartCheck(5000, ws);

		ws.onopen = function () {
			heartCheck.start()
		}
		//收到ws消息的时候在div对话框里面增加一行文字
		ws.onmessage = function (recv) {
			//$("#list").append("<li>" + recv.data + "</li>");
			heartCheck.reset()
			if (recv.data === "pong") {
				return;
			}
			const inf = JSON.parse(recv.data)
			loadImage(inf.fName)
			fillThings(inf);
		};
	</script>
</body>

</html>